<!--
 * @Author       : zp
 * @Date         : 2021-07-03 20:41:38
 * @LastEditors  : ly
 * @LastEditTime : 2021-07-13 10:33:11
 * @Description  : 描述
-->
<template>
  <a-form-model
    ref="dialogForm"
    :model="dialogForm"
    :rules="rules"
    layout="vertical"
  >
    <a-form-model-item label="姓名" prop="name">
      <a-input placeholder="姓名" v-model="dialogForm.name" disabled />
    </a-form-model-item>
    <a-form-model-item label="账户" prop="account">
      <a-input placeholder="账户" v-model="dialogForm.account" disabled />
    </a-form-model-item>
    <a-form-model-item label="新密码" prop="newPassword">
      <a-input
        placeholder="新密码"
        type="password"
        :maxLength="16"
        v-model="dialogForm.newPassword"
        autocomplete="new-password"
      />
    </a-form-model-item>
    <a-form-model-item label="确认密码" prop="confirmPassword">
      <a-input
        placeholder="确认密码"
        type="password"
        :maxLength="16"
        v-model="dialogForm.confirmPassword"
        autocomplete="new-password"
      />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { isPhone } from '@/utils/validate'
  import { queryUserByID } from '@/services/login/auth'
  import { resetPassword } from '@/services/access/user'
  import { validateRule } from '@/utils/validate'
  export default {
    data() {
      return {
        dialogForm: {
          name: '',
          account: undefined,
          newPassword: '',
          confirmPassword: '',
        },
        rules: {
          newPassword: validateRule(
            true,
            'isPassword_limit',
            'blur',
            '请输入密码'
          ),
          confirmPassword: validateRule(
            true,
            'isPassword_limit',
            'blur',
            '请输入密码'
          ),
        },
      }
    },

    computed: {
      ...mapGetters('account', ['user']),
      mobile() {
        return this.dialogForm.cellPhone
      },
    },
    watch: {
      mobile(value) {
        if (isPhone(value)) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
    },
    mounted() {
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        const companyID = this.user.companyID
        const userID = this.user.subjectID
        queryUserByID({ companyID, userID }).then((res) => {
          this.dialogForm = res.data.user
        })
      },

      // rowData, visible
      onSubmit(rowData) {
        console.log(rowData)
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            const companyID = this.user.companyID
            const userID = this.user.subjectID
            let { newPassword, confirmPassword } = this.dialogForm
            let params = { userID, companyID, newPassword, confirmPassword }
            if (newPassword !== confirmPassword) {
              this.$message.warning('两次密码输入不一致')
              return
            }
            resetPassword(params).then((res) => {
              this.$message.success(res.msg || '改密成功')
              this.$emit('close-modal')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      resetForm() {
        this.$refs.dialogForm.resetFields()
        this.dialogForm = this.$options.data().dialogForm
        return false
      },
    },
  }
</script>
